<template>
    <div>
        <el-container>
            <el-header style="background-color: #2d3136;height: 82px;width: 100%">
                <div style="height: 80px;color: black;display: flex ;justify-content: center;align-items: center">
                    <img alt="lala" src="@/assets/a2.png" style="width:150px;height: 75px;" @click="$router.push('/')">
                    <!--                    <span class="logo-title" v-show="!isCollapse" style="color: black">{{}}</span>-->
                    <el-tooltip content="折叠菜单" cursor:pointer effect="dark" placement="bottom"
                                style="cursor:pointer;color:grey;padding-top: 40px;padding-left: 38px">
                        <i :class="collapseIcon" style="font-size:30px;" @click="handleCollapse"></i>
                    </el-tooltip>
                </div>
                <!--导航栏模板-->
                <el-breadcrumb separator-class="el-icon-arrow-right"
                               style="margin-left: 20px;font-size:16px;padding-top: 36px">
                    <el-breadcrumb-item :to="{ path: '/' }" class="home" cursor:pointer>主页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: $route.path}">{{ $route.meta.name }}</el-breadcrumb-item>
                </el-breadcrumb>


                <div style="display: flex;flex: 1;;align-items: center; ">
                    <div style="flex:75%;padding-left: 600px;display:flex;">

                        <div v-if="user.role==='用户'"
                             style="flex:1;height: 80px;background-color: #2d3136;text-align: center;padding-top: 48px;padding-left: 20px;justify-content: flex-start">
                            <div style="width: 30px;height: 30px;float:right;">
                                <i class="el-icon-picture-outline-round" style="cursor:pointer; color:grey;font-size: 22px;"
                                   @click="$router.push('/')"></i>
                            </div>
                        </div>
                        <div v-if="user.role==='用户'" class="mummy"
                             style="flex:2;height: 80px;width: 80px;background-color: #2d3136;padding-top: 48px;">
                            <span style="cursor:pointer;color: grey;font-size: 17px" @click="$router.push('/')"><font>我的图片</font></span>
                        </div>


                        <div v-if="user.role==='用户'"
                             style="flex:1;height: 80px;background-color: #2d3136;text-align: center;padding-top: 48px;justify-content: flex-start">
                            <div style="width: 30px;height: 30px;float:right;">
                                <i class="el-icon-video-play" style=" cursor:pointer ;color:grey;font-size: 22px;"
                                   @click="$router.push('/')"></i>
                            </div>
                        </div>
                        <div v-if="user.role==='用户'" class="mummy"
                             style="flex:2;height: 80px;width: 80px;background-color: #2d3136;padding-top: 48px;">
                            <span style="cursor:pointer; color: grey;font-size: 17px;" @click="$router.push('/')"><font>我的课程</font></span>
                        </div>

                    </div>


                    <div style="flex: 15%;">
                        <!--下拉栏-->
                        <el-dropdown placement="bottom" style="float: right;padding-right: 20px">
                            <div style="display: flex;align-items: center ;cursor:default;margin-top: 10px">
                                <img :src="user.avatar ||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                                     alt=""
                                     style="cursor:pointer; width: 50px;height:50px;margin: 0 5px;border-radius: 50%">
                                <span style="cursor:pointer;font-weight: bold;font-size: 17px;padding-left: 5px">{{
                                        user.name
                                    }}</span>
                            </div>

                            <!-- 下拉栏内容 @click.native  item没有click事件-->
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                                <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <!-- 设置全屏-->
                    <div style="flex: 5%;padding-right:30px;">
                        <el-tooltip content="全屏" effect="dark" placement="bottom"
                                    style="color: grey;cursor:pointer;margin-top: 10px;float: right">
                            <i class="el-icon-full-screen" style="font-size: 30px;" @click="handleFull"></i>
                        </el-tooltip>
                    </div>

                </div>
            </el-header>

            <el-container>

                <el-aside :width="asideWith" style="min-height:100vh ;background-color:#2ac5b3">

                    <!--    :default-active	当前激活菜单的 index
                            index menu的地址路由
                            $route.path 当前浏览器访问的路由
                            router 可以启动页面跳转
                            active-text-color="#fff" 设置高亮的颜色为白色
                            :collapse="isCollapse" 设置菜单折叠收缩
                            :collapse-transition="false"取消折叠动画
                            style="border:none" 取消边框
                            text-color="rgba(255,255,255,0.65)" 整体菜单栏字体颜色
                            background-color="#001529" 菜单栏背景颜色
                            <span slot="title">系统首页</span> 这样才会显示字体样式
                            <el-submenu index='3'>二级菜单 <template slot="title"> slot要放在这里面才能生效
                    -->
                    <el-menu  :collapse="isCollapse" :collapse-transition="false" :default-active="$route.path"
                             active-text-color="black"
                             router style=";border:none;background-color:black; ">


                        <el-menu-item index="/home">
                            <i class="el-icon-house"></i>
                            <span slot="title" style="color: white">系统首页</span>
                        </el-menu-item>

                        <el-submenu v-if="user.role==='用户'" index='/1'>
                            <template slot="title">
                                <i class="el-icon-film"></i>
                                <span>课程与教程</span>
                            </template>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 初级课程</i></el-menu-item>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 高级课程</i></el-menu-item>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 免费资源</i></el-menu-item>
                        </el-submenu>
                        <el-submenu v-if="user.role==='用户'"   index='/2'>
                            <template slot="title">
                                <i class="el-icon-chat-square"></i>
                                <span>社区与论坛</span>
                            </template>

                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 论坛板块</i></el-menu-item>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 活动公告板</i></el-menu-item>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 用户互动</i></el-menu-item>
                        </el-submenu>

                        <el-submenu v-if="user.role==='用户'" index='/3'>
                            <template slot="title">
                                <i class="el-icon-picture-outline"></i>
                                <span>照片分享与画廊</span>
                            </template>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 个人相册</i></el-menu-item>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 公共画廊</i></el-menu-item>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 照片评论与评分</i></el-menu-item>
                        </el-submenu>

                        <el-submenu v-if="user.role==='用户'" index='/4'>
                            <template slot="title">
                                <i class="el-icon-camera"></i>
                                <span>摄影挑战与比赛</span>
                            </template>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 定期挑战</i></el-menu-item>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 比赛信息</i></el-menu-item>
                        </el-submenu>

                        <el-submenu v-if="user.role==='用户'" index='/6'>
                            <template slot="title">
                                <i class="el-icon-ship"></i>
                                <span>器材评测与推荐</span>
                            </template>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 器材数据库</i></el-menu-item>
                            <el-menu-item index="/*"><i class="el-icon-caret-right"> 购买建议</i></el-menu-item>
                        </el-submenu>


                        <!--                        <el-submenu index='/7' >-->
                        <!--                            <template slot="title">-->
                        <!--                                <i class="el-icon-user"></i>-->
                        <!--                                <span>个人中心</span>-->
                        <!--                            </template>-->
                        <!--                            <el-menu-item index="/71"><i class="el-icon-caret-right" >    个人资料</i></el-menu-item>-->
                        <!--                            <el-menu-item index="/72"><i class="el-icon-caret-right" >    我的课程</i></el-menu-item>-->
                        <!--                            <el-menu-item index="/73"><i class="el-icon-caret-right" >    我的照片</i></el-menu-item>-->
                        <!--                        </el-submenu>-->
                        <el-submenu v-if="user.role==='用户'" index='/8'>
                            <template slot="title">
                                <i class="el-icon-phone-outline"></i>
                                <span>帮助与支持</span>
                            </template>
                            <el-menu-item index="/*"><i class=" el-icon-caret-right"> 常见问题解答</i></el-menu-item>
                            <el-menu-item index="/*"><i class=" el-icon-caret-right"> 联系客服</i></el-menu-item>
                        </el-submenu>
                        <!-- v-if="user.role==='管理员' 实现菜单动态显示-->
                        <el-submenu v-if="user.role==='管理员'" index='info'>
                            <template slot="title">
                                <i class="el-icon-monitor"></i>
                                <span>信息管理</span>
                            </template>
                            <el-menu-item index="/user"><i class="el-icon-caret-right"> 用户信息 </i></el-menu-item>
                            <el-menu-item index="/admin"><i class="el-icon-caret-right"> 管理员信息</i></el-menu-item>
                            <el-menu-item index="/notice"><i class="el-icon-caret-right"> 系统公告</i></el-menu-item>
                            <el-menu-item index="/news"><i class="el-icon-caret-right"> 新闻信息</i></el-menu-item>
                        </el-submenu>


                    </el-menu>

                </el-aside>
                <!--
                 <i :class="collapseIcon" style="font-size:26px;" @click="handleCollapse"></i>  菜单收缩

                -->

                <!--                主体区域-->
                <el-main>
                    <router-view @update:user="updateUser"/>
                </el-main>

            </el-container>
        </el-container>


    </div>
</template>


<script>
    // @ is an alias to /src

    export default {
        name: "HomeView2",
        components: {

        },
        data() {
            return {
                isCollapse: false, //不收缩
                asideWith: '200px',
                collapseIcon: 'el-icon-turn-off',
                // users:[],
                user: JSON.parse(localStorage.getItem("honey-user") || '{}'),
                // url:'',
                // user1:{'id':'28','username':'gcc','password':'123'},
                // urls:[]
                flag: true


            }
        },

        mounted() {
            //页面加载完成后进行触发
            // axios.get('http://localhost:8080/user/getall').then(res=>{
            //         console.log(res),
            //             this.users=res.data.data
            //         // res.data={ 数据格式
            //         // code:'200',
            //         //     msg:'请求成功',
            //         //     data:{
            //         //
            //         //     }
            //         // }
            // }
            // )
            // request.get('/user/getall').then(res=>{
            //     this.users = res.data;
            // })
            if(!this.user.id)//当前浏览器没有用户信息
                this.$router.push('login')
        },
        methods: {
            // preview(url){
            //     window.open(url) //默认预览
            // },
            // showUrls(){
            //     console.log(this.urls)
            // },
            // handleMultipleFileUpload(response,file,fileList){
            //     console.log(response,file,fileList)
            //     this.urls = fileList.map(v=>v.response?.data)
            //
            // },
            // handleTableUpload(row,file,fileList){
            //     row.avatar = file.response.data //data: 'http://localhost:8080/file/download/1710756548188_1.png'
            //     // this.$set(row,'avatar',file.response.avatar)//给row加上一个属性avatar设置为avatar
            //     //触发更新
            //     request.put('/user/update',row).then(res=>{
            //         if(res.code==='200'){
            //             this.$message.success('上传成功');
            //         }else {
            //             this.$message.error('头像上传失败');
            //         }
            //     })
            //
            // },
            // handleFileUpload(response,file,fileList){
            //     this.fileList=fileList;
            // },
            updateUser(user) {
                this.user = JSON.parse(JSON.stringify(user))//json的深拷贝，变成一个新对象 ，让父级对象和自己无关
            },
            logout() {
                localStorage.removeItem('honey-user')  //清除当前token和用户数据
                this.$router.push('/login')
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse
                this.asideWith = this.isCollapse ? '64px' : '200px',
                    this.collapseIcon = this.isCollapse ? 'el-icon-open' : 'el-icon-turn-off'
            },
            // 设置全屏
            handleFull() {
                document.documentElement.requestFullscreen()

            }
        }
    }

</script>
<style>


    .el-icon-arrow-right {
        color: grey !important;
    }

    .el-breadcrumb__inner.is-link {
        color: grey !important;
        font-weight: bold;
        font-size: 17px;
    }

    .el-breadcrumb__inner.is-link:hover {
        color: white !important;
        font-weight: bold;
        font-size: 17px;
    }

    .el-icon-caret-right {

        font-size: 14px !important;

    }

    .el-tooltip i {

    }


    .el-submenu span {
        color: #d4f3f0;
    }

    .el-icon-caret-right {
        color: #d4f3f0 !important;
    }


    /*.el-submenu__title .el-icon-house{*/
    /*    color:  #d4f3f0;*/
    /*}*/

    .el-submenu__title .el-icon-arrow-down {
        color: #d4f3f0;
    }

    .el-submenu__title .el-icon-film {
        color: #d4f3f0;
    }

    .el-submenu__title .el-icon-chat-square {
        color: #d4f3f0;
    }

    .el-submenu__title .el-icon-picture-outline {
        color: #d4f3f0;
    }

    .el-submenu__title .el-icon-camera {
        color: #d4f3f0;
    }

    .el-submenu__title .el-icon-ship {
        color: #d4f3f0;
    }

    .el-submenu__title .el-icon-monitor {
        color: #d4f3f0;
    }

    .el-submenu__title .el-icon-phone-outline {
        color: #d4f3f0;
    }

    .el-submenu__title .el-icon-user {
        color: #d4f3f0;
    }


    /*后代选择器  !important 强制执行*/
    /*子菜单背景*/
    .el-menu--inline .el-menu-item {
        background-color: #2ac5b3 !important;
        padding-left: 41px !important;
        /*#000c17*/
    }


    /*兄弟选择器  !important 强制执行*/
    /*光标字体背景*/
    .el-menu-item:hover, .el-submenu__title:hover {

        background-color: #00baa9 !important;
        width: calc(100%);


    }

    /*图标光标颜色*/
    .el-submenu__title:hover i {
        color: white !important;
    }

    /*字体光标*/
    .el-submenu__title:hover span {
        color: white !important;
    }

    .el-menu-item:hover i {
        color: white !important;
    }


    /*首页高亮色*/
    .el-menu-item.is-active {
        background-color: #00baa9 !important;

    }


    .el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
        margin-left: -4px;

    }

    /*菜单高度*/
    .el-menu-item {
        height: 55px !important;
        line-height: 55px !important;

    }

    /*菜单高度*/
    .el-submenu__title {
        height: 55px !important;
        line-height: 55px !important;

    }

    .el-submenu__icon-arrow {
        margin-top: -5px !important;
        margin-left: -10px !important;
    }

    .el-submenu .el-menu-item {
        min-width: 0 !important;
    }

    .el-menu--inline .el-menu-item.is-active {
        padding-left: 45px !important;
    }

    /*.el-icon-s-fold::before{*/
    /*    width: 60px !important;*/
    /*    height: 60px !important;*/
    /*}*/
    /*transition:width .3s; 过度动画*/


    /*.logo-title {*/
    /*    margin-left: 5px;*/
    /*    font-size: 25px;*/
    /*    transition: all .3s;*/
    /*}*/

    .el-aside {
        transition: width .3s;
        box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    }

    .el-header {
        box-shadow: 2px 0 10px rgba(0, 21, 41, .35);
        display: flex;
        align-items: center;
    }


    .mummy font:hover {
        color: white !important;
    }


</style>
